<html xmlns="http://www.w3.org/1999/xhtml" > 
<head>
<title>evol-colorpicker</title>
    <meta charset="utf-8">
	<link id="jquiCSS" rel="stylesheet" href="../jquery-ui-1.12.1/themes/start/jquery-ui.css" type="text/css" media="all">
	<link href="css/demo.css" rel="stylesheet" /> 
	<link href="css/evol-colorpicker.min.css" rel="stylesheet" />
	<script src="../jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
	<script src="../jquery-ui-1.12.1/jquery-ui.min.js" type="text/javascript"></script>
	<script src="js/evol-colorpicker.min.js" type="text/javascript"></script>
</head>

<body>

<h1 id="title">evol-colorpicker demo</h1>

<h2 id="github">
    <a href="https://github.com/evoluteur/colorpicker">GitHub</a>
</h2>

<p><strong>evol-colorpicker</strong> (currently v3.2.6) is a web color picker which looks like the one in Microsoft Office 2010.
    It can be used inline or as a popup bound to a text box.
    It is a full jQuery UI widget, supporting various configurations and themes.
</p>

<div style="padding:2px 40px">

<p>Themes:
    <a href="#" class="css sel">ui-lightness</a> -
    <a href="#" class="css">ui-darkness</a> -
    <a href="#" class="css">redmond</a> -
    <a href="#" class="css">sunny</a> -
    <a href="#" class="css">le-frog</a>
</p>

<div class="demoPanel">
	Inline (using a DIV tag):<br/><br/>
	<div id="cpDiv"></div>
	<br/>
	<div class="demo-links">
		<a href="#" id="getVal2">Get Value</a>
		<a href="#" id="setVal2">Set Value</a><br/>
		<a href="#" id="enable2">Enable</a>
		<a href="#" id="disable2">Disable</a>
		<a href="#" id="destroy2">Destroy</a><br/><br/>
	</div> 
</div>

<div class="demoPanel">
	Inline with "web" default palette:<br/><br/>
	<div id="cpDiv2"></div> 
</div>

<div class="demoPanel" style="width:130px">
	Using "showOn" option:<br/><br/>
	button
	<input id="cpButton" value="#92cddc" />
	focus 
	<input id="cpFocus" value="#dbeef3" />
	both
	<input id="cpBoth" value="#31859b" />
	<a href="#" id="show">link</a>
	<input id="cpOther" value="#002060" />
</div>

<div id="cpb" class="demoPanel" style="width:170px">
	Event binding:<br/>
	change.color and mouseover.color<br/><br/>
	<input id="cp1"/><br/> 
	<div id="tests" class="demo-links">
	<a href="#" id="getVal">Get Value</a>
	<a href="#" id="setVal">Set Value</a><br/>
	<a href="#" id="enable">Enable</a>
	<a href="#" id="disable">Disable</a>
	<a href="#" id="clear">Clear</a>
	<a href="#" id="destroy1">Destroy</a>
	</div>
</div>

<div class="demoPanel" style="width:130px">
	With transparent color:<br/>
	<br/> 
	<input id="transColor" value="#0000ffff" /><br/> 
</div>

<div class="demoPanel" style="width:130px">
	Using "hideButton" option:<br/>
	<br/>
	<input id="hideButton" value="#92cddc" /><br/>
</div>

<div class="demoPanel ui-widget ui-widget-content ui-corner-all" style="width:130px;">
	No color indicator on the palette:<br/>
	<br/> 
	<input id="noIndColor" value="#92cddc" /><br/> 
</div>

<div class="demoPanel ui-widget ui-widget-content ui-corner-all" style="width:130px;">
	In French:<br/>
	<br/> 
	<input id="frenchColor" value="#92cddc" /><br/>
	Using the "strings" option you can translate the colorpicker.<br/>
</div>
<div style="clear:both;"></div>

</div>

<script>

$(document).ready(function(){

	// Change theme
    $('.css').on('click', function(evt){ 
        $('#jquiCSS').attr('href','http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/'+this.innerHTML+'/jquery-ui.css');
        $('.css').removeClass('sel');
        $(this).addClass('sel');
    });
	
	// Events demo
	$('#cp1').colorpicker({color:'#8db3e2',
		initialHistory: ['#ff0000','#000000','red']
})
		.on('change.color', function(evt, color){
			$('#cpb').css('background-color',color);
		})
		.on('mouseover.color', function(evt, color){
            if(color){
                $('#cpb').css('background-color',color);
            }
		});
	
	$('#getVal').on('click', function(){
		alert('Selected color = "' + $('#cp1').colorpicker("val") + '"');
	});
	$('#setVal').on('click', function(){
		$('#cp1').colorpicker("val",'#31859b');
	});
	$('#enable').on('click', function(){
		$('#cp1').colorpicker("enable");
	});
	$('#disable').on('click', function(){
		$('#cp1').colorpicker("disable");
	});
	$('#clear').on('click', function(){
		var v=$('#cp1').colorpicker("clear") ;
	});
	$('#destroy1').on('click', function(){
		var v=$('#cp1').colorpicker("destroy") ;
	});
	
	// Instanciate colorpickers
    $('#cpBoth').colorpicker();
    $('#cpDiv').colorpicker({color:'#31859b'});
    $('#cpDiv2').colorpicker({color:'#31859b', defaultPalette:'web'});
    $('#cpFocus').colorpicker({showOn:'focus'});
    $('#cpButton').colorpicker({showOn:'button'});
    $('#cpOther').colorpicker({showOn:'none'});
	$('#show').on('click', function(evt){
		evt.stopImmediatePropagation();
		$('#cpOther').colorpicker("showPalette");
	});
	
	// With transparent color
	$('#transColor').colorpicker({
		transparentColor: true
	});

	// With hidden button
	$('#hideButton').colorpicker({
		hideButton: true
	});

	// No color indicator
	$('#noIndColor').colorpicker({
		displayIndicator: false
	});

	// French colorpicker
	$('#frenchColor').colorpicker({
		strings: "Couleurs de themes,Couleurs de base,Plus de couleurs,Moins de couleurs,Palette,Historique,Pas encore d'historique."
	});

	// Inline colorpicker
	$('#getVal2').on('click', function(){
		alert('Selected color = "' + $('#cpDiv').colorpicker("val") + '"');
	});
	$('#setVal2').on('click', function(){
		$('#cpDiv').colorpicker("val",'#31859b');
	});
	$('#enable2').on('click', function(){
		$('#cpDiv').colorpicker("enable");
	});
	$('#disable2').on('click', function(){
		$('#cpDiv').colorpicker("disable");
	});
	$('#destroy2').on('click', function(){
		$('#cpDiv').colorpicker("destroy");
	});

	// Fix links
	$('a[href="#"]').attr('href', 'javascript:void(0)');

});

</script>

<p><br/><a href="https://github.com/evoluteur/colorpicker/archive/master.zip">Download</a>, documentation, and source code are available at <a href="https://github.com/evoluteur/colorpicker" target="download">GitHub</a> under the <a href="http://github.com/evoluteur/colorpicker/raw/master/LICENSE.md">MIT license</a>.</p>

<br/><br/>
<div class="footer">&#169; 2016 Olivier Giulieri</div>

</body>

</html>